<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<ui:composition template="../templates/plantillaAdmin.xhtml">
	<ui:define name="content">
		<h:form prependId="false" id="growlForm">
			<p:growl id="growl" showDetail="false" />
		</h:form>
		<h:form prependId="false" id="dataForm">
			<p:panel id="data" toggleable="true" toggleSpeed="250">
				<f:facet name="header">
					<h:outputText value="Mantenimiento de Categorías" />
				</f:facet>

				<h:panelGrid columns="1">
					<p:fieldset legend="Registrar una Categoría" toggleable="true"
						toggleSpeed="300">
						<h:panelGrid id="grid" columns="3">
							<h:outputLabel for="nombreCategoria" value="Nombre:"
								style="font-weight: bold;" />


							<p:inputText id="nombreCategoria"
								requiredMessage="Ingrese el nombre de la Categoría"
								value="#{categoriaBean.categoria.nombre}" required="true"
								style="width:200px" />
							<p:message for="nombreCategoria" display="icon" />


							<h:outputLabel for="descripcionCategoria"
								style="font-weight: bold;" value="Descripción:" />

							<p:inputText id="descripcionCategoria"
								requiredMessage="Ingrese la descripción de la Categoría"
								value="#{categoriaBean.categoria.descripcion}" required="true"
								style="width:200px" />
							<p:message for="descripcionCategoria" display="icon" />
						</h:panelGrid>
						<p:row>
							<p:column>
								<p:commandButton id="registrarCategoriaButton"
									value="#{messages.label_save}"
									update=":growlForm:growl data categoriaTree"
									actionListener="#{categoriaBean.persist}" />
							</p:column>
						</p:row>
					</p:fieldset>
					<p:fieldset legend="Seleccione una Categoría" toggleable="true"
						toggleSpeed="300">
						<h:panelGrid>
							<p:tree value="#{categoriaBean.root}" var="node" dynamic="true"
								cache="true" id="categoriaTree" selectionMode="single"
								selection="#{categoriaBean.selectedNode}" styleClass="Search">

								<p:ajax event="select" listener="#{categoriaBean.onNodeSelect}" />

								<p:treeNode>
									<h:outputText value="#{node}" />
								</p:treeNode>
							</p:tree>
						</h:panelGrid>
					</p:fieldset>


				</h:panelGrid>

			</p:panel>
		</h:form>


	</ui:define>
</ui:composition>
</html>